<template>
    <div v-loading="fullscreenLoading" ref="content">
        <div class="header">
            <span>状态：</span>
            <el-select class="status-select" v-model="status" size="small" placeholder="请选择">
                <el-option label="全部" value></el-option>
                <el-option label="待审核" value="0"></el-option>
                <el-option label="已通过" value="1"></el-option>
                <el-option label="没通过" value="2"></el-option>
            </el-select>

            <span>手机号：</span>
            <el-input class="keyword" v-model="input" size="small" clearable @clear="getData"></el-input>
            <el-date-picker
                v-model="dateTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
            ></el-date-picker>
            <el-button type="primary" size="small" @click="getData">查询</el-button>
        </div>
        <table class="table" border="0" cellpadding="0" cellspacing="0">
            <thead>
                <th>序号</th>
                <th>id</th>
                <th>头像</th>
                <th>昵称</th>
                <th>电话</th>
                <th>注册时间</th>
                <th>状态</th>
                <th></th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list" :key="index">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.id }}</td>
                    <td>
                        <el-image
                            v-if="item.avatar"
                            class="img"
                            fit="cover"
                            :src="item.avatar"
                            :preview-src-list="[item.avatar]"
                        ></el-image>
                        <span v-else>暂无</span>
                    </td>
                    <td>{{ item.nickname }}</td>
                    <td>{{ item.mobile || '暂无' }}</td>
                    <td>{{ item.addTime }}</td>
                    <td>{{ getStatusStr(item.headstatus) }}</td>
                    <td>{{ item.brandName }}</td>
                    <td width="300">
                        <button @click="edit(item)">审核</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-if="list.length" class="pagination">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.num"
                :page-size="page.size"
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div>
        <!-- <p class="noData" v-else>暂无数据</p> -->
        <!-- 弹框 -->
        <el-dialog title="团长审核" :visible.sync="dialogVisible" width="1000px">
            <div>
                <div>
                    <span>历史订单：</span>
                </div>
                <div class="dialoglist" v-for="(item, index) in dialoglist" :key="(item, index)">
                    <div>
                        <div style="width:800px;display:flex">
                            <div style="width:8%">商品名：</div>
                            <div style="width:92%">{{ item.goodsname }}</div>
                        </div>
                        <div class="flex">
                            <div>
                                <span>时间：</span>
                                <span>{{ item.ordertime }}</span>
                            </div>
                            <div>
                                <span>金额：</span>
                                <span>{{ item.orderpic }}</span>
                            </div>
                            <div>
                                <span>订单号：</span>
                                <span>{{ item.ordersn }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="info">
                <div>
                    <p>添加备注：</p>
                </div>
                <div>
                    <el-input
                        placeholder="请输入内容"
                        v-model="info"
                        clearable
                        size="medium "
                        style="width:885px"
                    ></el-input>
                </div>
            </div>
            <div class="btn">
                <span>状态：</span>
                <el-select class="btnselect" v-model="updatestatus" size="small" placeholder="请选择">
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="不通过" value="2"></el-option>
                </el-select>
                <button class="save" @click="updateStatus">保存</button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import * as request from '@/api/approve'
import dayjs from 'dayjs'
export default {
    components: {},
    data() {
        return {
            input: '',
            info: '',
            status: '',
            userId: '',
            headid: '',
            updatestatus: '',
            list: [],
            dialoglist: [],
            fullscreenLoading: false,
            dialogVisible: false,
            form: {
                id: '',
                picture: '',
                url: '',
                status: '',
            },
            page: {
                size: 10,
                num: 1,
                total: 0,
            },
            //   选择器
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            dateTime: '',
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        handleCurrentChange(val) {
            this.page.num = val
            this.getData()
        },
        /* 获取列表数据 */
        async getData() {
            this.fullscreenLoading = true
            let query = {
                phone: this.input,
                status: this.status,
                userId: this.userId,
                page: this.page.num,
                size: this.page.size
            }
            if (this.dateTime) {
                query.begintime = dayjs(this.dateTime[0]).format('YYYY-MM-DD HH:mm:ss')
                query.endtime = dayjs(this.dateTime[1]).format('YYYY-MM-DD HH:mm:ss')
            }
            try {
                const { errno, data, errmsg } = await request.captain(query)
                if (errno === 0) {
                    this.list = data.userlist
                    this.page.total = data.total
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
            this.fullscreenLoading = false
        },
        edit(item) {
            this.userId = item.id
            this.dialogVisible = true
            this.shenhe()
        },
        // 审核页面
        async shenhe() {
            let query = {
                userId: this.userId,
            }
            try {
                const { errno, data, errmsg } = await request.captain(query)
                if (errno === 0) {
                    this.dialoglist = data
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
        },
        async updateStatus() {
            let params = {
                id: this.userId,
                updatestatus: this.updatestatus,
                remarks: this.info,
            }
            try {
                const { errno, errmsg } = await request.captainAudit(params)
                if (errno === 0) {
                    this.$message.success(errmsg)
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
        },
        getStatusStr(headstatus) {
            let str = ''
            switch (headstatus) {
                case 0:
                    str = '待审核'
                    break

                case 1:
                    str = '已通过'
                    break

                case 2:
                    str = '没通过'
                    break

                default:
                    break
            }
            return str
        },
    },
}
</script>
<style lang="scss" scoped>
.header {
    padding: 30px 0 10px 20px;
    .status-select {
        margin-right: 20px;
    }
    .keyword {
        width: 200px;
        margin-right: 10px;
    }
}
.table {
    width: 100%;
    th {
        height: 100px;
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        font-size: 18px;
    }
    td {
        height: 120px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
    }
    button {
        margin: 0 10px;
        width: 110px;
        height: 32px;
        background-color: #3699ff;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        border-radius: 2px;
    }
    .img {
        width: 150px;
        height: 100px;
    }
    .desc {
        width: 500px;
    }
}
.noData {
    margin-top: 40px;
    text-align: center;
    color: #888;
}
.dialog-inner {
    margin-top: -20px;
    padding: 0 10px;
}
.pagination {
    margin: 25px 0;
    text-align: center;
}
.dialoglist {
    padding: 5px;
    margin-top: 10px;
    border: gainsboro 1px solid;
}
.flex {
    display: flex;
    justify-content: space-between;
    width: 800px;
    margin-top: 20px;
}
.info {
    display: flex;
    height: 50px;
    line-height: 50px;
    margin-top: 50px;
}
.btn {
    display: flex;
    margin-top: 30px;
    height: 50px;
    line-height: 50px;
}
.btnselect {
    margin: auto auto auto 25px;
}
.save {
    margin: auto 10px;
    width: 110px;
    height: 32px;
    background-color: #3699ff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 2px;
}
</style>
